 <template>
  <div>
    <router-link :to="'/course/video/add/' + currentId ">
      <el-button
        class="filter-item add-style"
        style="margin-left: 10px;"
        type="primary"
        size="mini"
        icon="el-icon-circle-plus-outline"
      >添加</el-button>
    </router-link>

    <tTable :columns="columns" :data="fromData">
      <!-- 缩略图 -->
      <template v-slot:videoCoverUrl="slotProps">
        <img
          v-if="slotProps.scope.row.videoCoverUrl"
          :src="slotProps.scope.row.videoCoverUrl"
          class="cover-style"
        >
      </template>
      <!-- 上传状态 -->
      <template v-slot:review="slotProps">
        <el-tag :type="slotProps.scope.row.review | statusFilter">{{slotProps.scope.row.review}}</el-tag>
      </template>
      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button
          type="warning"
          class="edit-style"
          size="mini"
          @click="editVideo(slotProps.scope.row)"
        >编辑</el-button>
        <el-button
          type="primary"
          class="add-style"
          size="mini"
          @click="reviewVideo(slotProps.scope.row)"
        >预览</el-button>

        <el-button
          type="danger"
          class="delete-style"
          size="mini"
          @click="removeItem(slotProps.scope.row)"
          slot="reference"
        >删除</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>

    <Review :videoUrl="videoUrl" :dislogVisible="dislogVisible" :handleClose="handleClose"></Review>
  </div>
</template>

<script>
import Review from "src/components/review/review.vue";
import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

import { formatDateTime } from "src/util/time.js";
import { getAllVideo, deleteVideo } from "api/getData";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        审核成功: "success", // 成功
        审核失败: "danger", // 失败
        审核中: "info" // 失败
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      videoUrl: "", // 当前视频预览地址
      dislogVisible: false, //是否显示预览框
      searchData: "",
      fromData: [],
      currentId: "", // 当前分类id

      total: -1,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "title", label: "名称" }
        },
        {
          slot: "videoCoverUrl",
          attr: { prop: "videoCoverUrl", label: "缩略图" }
        },
        {
          slot: "review",
          attr: { prop: "review", label: "上传状态", width: "110" }
        },
        {
          attr: { prop: "createTime", label: "创建时间" }
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "300" }
        }
      ]
    };
  },
  components: { Review, Pagination, tTable },
  mounted() {
    this.currentId = this.$route.params.id;
    this.getData(1);
  },
  methods: {
    getData: function(pageNumber) {
      getAllVideo(pageNumber, this.currentId).then(res => {
        this.total = res.totalElements;
        this.fromData = res.content.map((item, index) => {
          item.createTime = formatDateTime(item.createTime);
          return item;
        });
      });
    },
    reviewVideo: function(item) {
      if (item.review === "审核成功") {
        this.dislogVisible = true;
        this.videoUrl = item.videoUrl;
      } else {
        this.$message.error(item.review + "，无法预览");
      }
    },
    handleClose(done) {
      this.dislogVisible = false;
    },
    removeItem(item) {
      this.$confirm("确认删除这个视频么？").then(_ => {
        deleteVideo(item.id).then(res => {
          this.$message.success("删除成功");
          this.getData(1);
        });
      });
    },
    editVideo(row) {
      this.$router.push(
        "/course/video/update/" + this.currentId + "/" + row.id
      );
    },
    handleChange: function(pageNumber) {
      this.getData(pageNumber);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.cover-style {
  height: 100px;
}
</style>
